<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./public/JQuery/jquery.3.5.0.js"></script>
<script src="./public/JQuery/jquery.bannerT.js"></script>
<style>
        .banner1 {width: 200px;height: 600px;margin: 0 auto;position: relative;/* overflow: hidden; */}
        .banner1 .imgbox{width: 100%;height: 100%;}
        .banner1 .imgbox>div{width: 100%; height: 33%;background-color: blue;;margin-bottom: 1%;}
        .banner1 .imgbox img{width: 100%;position: absolute;left:100%;top:0;}
        .banner1 .imgbox img:first-child{left:0;}

        .banner1 .btns *{position: absolute;top:130px;width: 40px;height: 40px;border: none;background: rgba(200,200,200,0.6);}
        .banner1 #left{left:0}
        .banner1 #right{right:0}

        .banner1 .list{display: flex;background: rgba(200,200,200,0.6);height: 30px;line-height:30px;text-align: center;position: absolute;bottom: 0;left:0;width: 100%;}
        .banner1 .list span{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;cursor: pointer}
        .banner1 .list span.active{background: red;color:#fff;}
</style>
<body>
    <div class="banner1">

    </div>
</body>
<script>
    $.ajax({
        url:"http://localhost:3000/database/goodsBasic.json",
        dataType:"json",
        success:function(res){
            const imgs=res.msg;
            $(".banner1").banner(imgs,{
            btn:true,
            list:true,
            autoPlay:true,
            delayTime:3000,
            moveTime:300,
            index:0,
            currentClass:"active"
        })
        }
    })
</script>
</html>